<template>
  <div class="padding-l-20 padding-r-20 padding-t-20 h-100 table-page">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="IP白名单">
        <filter-bar>
          <template slot="left-bar">
            <a-space>
              <div>是否启用白名单：<a-switch :checked="enable" @change="switchEnable" checked-children="是" un-checked-children="否" /></div>
            </a-space>
          </template>
          <template slot="right-bar">
            <a-space>
              <a-button class="nbcs-btn nbcs-btn-primary position-r" @click="edit(0, {})">新增IP</a-button>
            </a-space>
          </template>
        </filter-bar>
        <a-table ref="table" :columns="columns" :scroll="{ x: 900, y: scrollY }" :data-source="list" :pagination="false" :rowKey="(record, index) => record.id" :loading="loading">
          <template slot="operation" slot-scope="text, record">
            <a-popconfirm title="确定删除?" @confirm="() => del(record.id)">
              <a class="table-red-btn">删除</a>
            </a-popconfirm>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>
    <ip-White-edit ref="whiteListEdit" @refresh="getList"/>
  </div>
</template>
<script>
import FilterBar from '@/layouts/FilterBar.vue';
import { cutDateSecond } from '@/utils/date';
import IpWhiteEdit from './IPwhiteEdit';
import { enableIpWhite, list, del } from '@/services/ipWhite'
export default {
  name: 'IPwhite',
  components: { FilterBar, IpWhiteEdit },
  data() {
    return {
      scrollY:0,
      loading: false,
      enable: '9',
      columns: [
        { title: '#', width: 60, dataIndex: 'id', key: '#' },
        { title: 'ip地址', dataIndex: 'ipAddr' },
        { title: '创建人', dataIndex: 'createUserName' },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          customRender: text => {
            return cutDateSecond(text);
          }
        },
        {
          title: '操作',
          key: 'operation',
          dataIndex: 'operation',
          fixed: 'right',
          width: 200,
          scopedSlots: { customRender: 'operation' }
        }
      ],
      list: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    switchEnable(checked){
      this.enable = checked
      this.setEnable(checked)
    },
    getList(params) {
      this.loading = true;
      list(params).then(res => {
        this.loading = false;
        this.list = res.data.data.list;
        this.enable = this.list.length == 0 ? false : this.list[0].isOff === '1' ? true : false
      });
    },
    setEnable(checked) {
      enableIpWhite({enabled:checked}).then(res => {
        if (res.data.code == 0) {
          this.$message.success('设置成功');
        } else {
          this.$message.error('设置失败');
        }
      });
    },
    del(id) {
      del({id:id}).then(res => {
        if (res.data.code == 0) {
          this.$message.success('删除成功');
        } else {
          this.$message.error('删除失败');
        }
        this.getList();
      });
    },
    edit(action, data) {
      this.$refs['whiteListEdit'].showInfo(true, action, data);
    }
  }
};
</script>
<style lang="less" scoped></style>
